<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful Bootstrap</title>
    <link href="/js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
    <style type="text/css">
        body {
            min-width: 1024px;
        }
        .container {
            margin-top: 10px;
        }
        .table, .table th {
            text-align: center;
        }
    </style>
  </head>
  
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-condensed table-striped table-bordered table-hover table-responsive">
                    <thead>
                        <tr>
                            <th><input class="chk" type="checkbox"></th>
                            <th>用户编号</th>
                            <th>用户名称</th>
                            <th>登录名</th>
                            <th>角色</th>
                            <th>安全域</th>
                            <th>状态</th>
                            <th>邮件</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                <nav>
                  <ul class="pagination">
                    <li>
                      <a href="#">
                        <span>&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#">
                        <span>&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>
        </div>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $.post("/user/findAll?pageNo=1&pageSize=10")
               .done(function(result) {
                   var userList = result["content"];
                   $.each(userList, function(index, value) {
                       var tr = $("<tr></tr>");
                       tr.append($("<td></td>").append($(".chk:first").clone()));
                       tr.append($("<td></td>").html(value.id));
                       tr.append($("<td></td>").html(value.username));
                       tr.append($("<td></td>").html(value.loginName));
                       tr.append($("<td></td>").html("超级管理员"));
                       tr.append($("<td></td>").html(value.mobile));
                       tr.append($("<td></td>").html(value.userStatus));
                       tr.append($("<td></td>").append($("<a></a>")
                               .attr("href", "mailto:" + value.email).html(value.email)));
                       tr.appendTo($(".table tbody"));
                   });
                   console.log("请求完成！" + result);
               })
               .fail(function(result) {
                   console.log(result);
                   console.log("请求失败！");
               })
               .always(function(result) {
                   console.log("请求发送！");
               });
        });
    </script>
  </body>
</html>